<script lang="ts" setup>
import { Menu as Setting } from '@element-plus/icons-vue'
import { RouterView } from "vue-router";
import { useRouter } from 'vue-router';
const router = useRouter()
const handleSelect = (e: string) => {
    switch (e) {
        case '1':
            router.push({ name: 'userFB' })
            break;
        case '2':
            router.push({ name: 'userJQ' })
            break;
        case '3':
            router.push({ name: 'userData' })
            break;
        case '4':
            router.push({ name: 'userVip' })
            break;
        case '5':
            router.push({ name: 'FB' })
            break;
        case '6':
            router.push({ name: 'finishFB' })
            break;
        case '7':
            router.push({ name: 'ann' })
            break;
    }
}
</script>

<template>
    <el-container class="layout-container-demo">
        <el-aside width="300px">
            <el-scrollbar>
                <el-menu default-active="1" @select="handleSelect">
                    <el-menu-item index="1">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>用户发单数据</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>用户接单数据</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>注册的账号</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>会员的账号</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>fb账号</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>fb账号成交订单</span>
                    </el-menu-item>
                    <el-menu-item index="7">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>公告管理</span>
                    </el-menu-item>
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <div class="toolbar">
                    <span>后台管理</span>
                </div>
            </el-header>

            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>

<style scoped>
.layout-container-demo {
    width: 100%;
    height: 900px;
}

.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>